<template>
    <div id="app-container">
        <div style="width:1000px;margin:0 auto">
            <el-row :gutter="20">
                <el-col :span="24" style="display: inline-block; text-align: left;">
                    <div id="overview-chart" style="width: 1000px; height: 150px; display: inline-block;"></div>
                </el-col>
            </el-row>
        </div>
        <div style="width:1200px;margin:0 auto">
            <el-row :gutter="20">
                <el-col :span="24">
                    <div id="chart"></div>
                </el-col>
              </el-row>
        </div>
        <div>
            <el-row :gutter="20" style="display: flex; justify-content: center; align-items: center; background-color: transparent; color: white;">
                <el-col :span="20">
                  <el-tabs type="border-card" style="background-color: transparent;">
                    <el-tab-pane label="财务管理" style="background-color: transparent; color: white;">
                        <el-table :data="tableData" :row-class-name="tableRowClassName" height="250" style="width: 100%; background-color: transparent; color: #389af4;">
                            <el-table-column label="日期" width="180" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="date"></el-table-column>
                            <el-table-column label="姓名" width="180" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="name"></el-table-column>
                            <el-table-column label="地址" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="address"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="器材信息" style="background-color: transparent; color: white;">
                            <el-table :data="tableData" :row-class-name="tableRowClassName" height="250" style="width: 100%; background-color: transparent; color: #389af4;">
                            <el-table-column label="日期" width="180" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="date"></el-table-column>
                            <el-table-column label="姓名" width="180" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="name"></el-table-column>
                            <el-table-column label="地址" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="address"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="课程情况" style="background-color: transparent; color: white;">
                        <el-table :data="tableData" :row-class-name="tableRowClassName" height="250" style="width: 100%; background-color: transparent; color: #389af4;">
                            <el-table-column label="日期" width="180" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="date"></el-table-column>
                            <el-table-column label="姓名" width="180" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="name"></el-table-column>
                            <el-table-column label="地址" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="address"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="教练情况" style="background-color: transparent; color: white;">
                        <el-table :data="tableData" :row-class-name="tableRowClassName" height="250" style="width: 100%; background-color: transparent; color: #389af4;">
                            <el-table-column label="日期" width="180" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="date"></el-table-column>
                            <el-table-column label="姓名" width="180" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="name"></el-table-column>
                            <el-table-column label="地址" :header-cell-style="{ 'background-color': 'transparent', color: '#389af4' }" prop="address"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                  </el-tabs>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }]

        }
    },
    mounted() {
    this.renderChart();
    this.initChart()
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
          return 'warning-row'
      },
    renderChart() {
      var myChart = this.$echarts.init(document.getElementById("overview-chart"));
      var data = [
        {
          name: '会员总数',
          value: 54
        },
        {
          name: '今日新会员数',
          value: 44
        },
        {
          name: '教练总数',
          value: 35
        },
        {
          name: '今日课程预约人数',
          value: 30
        },
        {
          name: '过期会员人数',
          value: 20
        }
      ];
      
      var titleArr = [], seriesArr = [];
      var colors = [
        ['#389af4', '#dfeaff'],
        ['#ff8c37', '#ffdcc3'],
        ['#ffc257', '#ffedcc'],
        ['#fd6f97', '#fed4e0'],
        ['#a181fc', '#e3d9fe']
      ];
      
      data.forEach(function(item, index) {
        titleArr.push({
          text: item.name,
          left: index * 19.9 + 10 + '%',
          top: '75%',
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '15',
            color: colors[index][0],
          },
        });
      
        seriesArr.push({
          name: item.name,
          type: 'pie',
          clockWise: false,
          radius: [20, 30],
          itemStyle:  {
            normal: {
              color: colors[index][0],
              shadowColor: colors[index][0],
              shadowBlur: 0,
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
            }
          },
          
          hoverAnimation: false,
          center: [index * 20 + 10 + '%', '50%'],
          data: [
            {
              value: item.value,
              label: {
                normal: {
                  formatter: function(params){
                    return params.value+'人';
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '15',
                    fontWeight: 'bold',
                    color: colors[index][0]
                  }
                }
              },
            },
            {
              value: 100 - item.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              }
            }
          ]
        });
      });
      var option = {
        backgroundColor: "transparent",
        left: "center",
        title: titleArr,
        series: seriesArr
      };
      
      myChart.setOption(option);
    },
    initChart() {
      const myChart = this.$echarts.init(document.getElementById('chart'));
      const option = {
        "title": {
            "text": "店铺信息详情",
            "left": "center",
            "y": "10",
            "textStyle": {
            "color": "#fff"
            }
        },
        "backgroundColor": "rgba(0, 0, 0, 0)", // 设置背景色为透明
            "color": "#384757",
            "tooltip": {
            "trigger": "axis",
            "axisPointer": {
                "type": "cross",
                "crossStyle": {
                "color": "#384757"
                }
            }
            },
            "legend": {
            "data": [
                {
                "name": "待处理",
                "icon": "circle",
                "textStyle": {
                    "color": "#7d838b"
                }
                },
                {
                "name": "已处理",
                "icon": "circle",
                "textStyle": {
                    "color": "#7d838b"
                }
                },
                {
                "name": "完成率",
                "icon": "circle",
                "textStyle": {
                    "color": "#7d838b"
                }
                }
            ],
            "top": "10%",
            "textStyle": {
                "color": "#fff"
            }
            },
            "xAxis": [
            {
                "type": "category",
                "data": [
                "2023-05",
                "2023-06",
                "2023-07",
                "2023-08",
                "2023-09",
                "2023-10"
                ],
                "axisPointer": {
                "type": "shadow"
                },
                "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#7d838b"
                }
                }
            }
            ],
            "yAxis": [
            {
                "type": "value",
                "nameTextStyle": {
                "color": "#7d838b"
                },
                "min": 0,
                "max": 80,
                "interval": 10,
                "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#7d838b"
                }
                },
                "axisLine": {
                "show": true
                },
                "splitLine": {
                "lineStyle": {
                    "color": "#7d838b"
                }
                }
            },
            {
                "type": "value",
                "name": "完成率",
                "show": true,
                "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#7d838b"
                }
                }
            }
            ],
            "grid": {
            "top": "20%"
            },
            "series": [
            {
                "name": "待处理",
                "type": "bar",
                "data": [
                14,
                16,
                46,
                16,
                18,
                16
                ],
                "barWidth": "auto",
                "itemStyle": {
                "normal": {
                    "color": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [
                        {
                        "offset": 0,
                        "color": "rgba(255,37,117,0.7)"
                        },
                        {
                        "offset": 0.5,
                        "color": "rgba(0,133,245,0.7)"
                        },
                        {
                        "offset": 1,
                        "color": "rgba(0,133,245,0.3)"
                        }
                    ],
                    "globalCoord": false
                    }
                }
                }
            },
            {
                "name": "已处理",
                "type": "bar",
                "data": [
                14,
                12,
                46,
                16,
                18,
                16
                ],
                "barWidth": "auto",
                "itemStyle": {
                "normal": {
                    "color": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "colorStops": [
                        {
                        "offset": 0,
                        "color": "rgba(255,37,117,0.7)"
                        },
                        {
                        "offset": 0.5,
                        "color": "rgba(0,255,252,0.7)"
                        },
                        {
                        "offset": 1,
                        "color": "rgba(0,255,252,0.3)"
                        }
                    ],
                    "globalCoord": false
                    }
                }
                },
                "barGap": "0"
            },
            {
                "name": "完成率",
                "type": "line",
                "yAxisIndex": 1,
                "data": [
                100,
                33,
                100,
                100,
                100,
                100
                ],
                "itemStyle": {
                "normal": {
                    "color": "#ffaa00"
                }
                },
                "smooth": true
            }
            ]
        };
      myChart.setOption(option);
    }
  }

}
</script>
<style>
    
    #app-container {
        overflow: auto;
        background-size: cover;
        background-image: url("~@/assets/images/shou.gif");
         /* 使用视口高度作为高度值，确保 div 铺满整个屏幕 */
         height: 100vh;
    }
    .el-table .warning-row {
        background-color: transparent;
      }
      .el-table__header thead th {
        background-color: transparent;
        color: #389af4;
      }
      .el-table__header thead tr {
        background-color: transparent;
        color: white;
      }
      .el-table__header thead th {
        background-color: transparent !important;
        color: #FFFFFF; /* 设置你想要的文字颜色 */
        border-bottom: none; /* 移除底部边框，确保没有额外的颜色影响 */
      }
      .el-table__header thead th div.cell {
        color: #ffffff;
      }
        /* 让 tab 标题和内容背景透明 */
        .el-tabs > .el-tabs__header,
        .el-tabs__content {
        background-color: transparent;
        }

        /* 让标签标题文字颜色为白色 */
        .el-tabs > .el-tabs__header .el-tabs__item.is-active,
        .el-tabs > .el-tabs__header .el-tabs__item:hover {
        color: white;
        }
        /* 让选中状态的标签标题背景颜色为蓝色 */
        .el-tabs > .el-tabs__header .el-tabs__item.is-active,
        .el-tabs > .el-tabs__header .el-tabs__item:hover {
        background-color:white;
        }
        /* 让未选中状态的标签标题文字颜色为白色 */
        .el-tabs__item {
            color: white !important; /* 使用!important来确保样式被应用 */
        }
        
        /* 让选中状态的标签标题文字颜色为 #389af4 */
        .el-tabs__item.is-active {
            color: #389af4 !important; /* 使用!important来确保样式被应用 */
        }
        #chart {
            height: 400px; /* 设置图表容器的高度 */
          }
</style>